<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'

import HanziWriter from 'hanzi-writer'
import charData1 from 'hanzi-writer-data/招'
import charData2 from 'hanzi-writer-data/新'
import charData3 from 'hanzi-writer-data/啦'

/** 暴露函数 */

defineExpose({
  removeAnimate,
  addAnimate,
  initCharacter,
})

/** 手写笔画汉字 */

const char1 = ref(null)
const char2 = ref(null)
const char3 = ref(null)

function initCharacter() {
  const remValue = parseFloat(document.documentElement.style.fontSize)
  const size = remValue * 1.5

  const char1Element = document.getElementById('char1')
  if (char1Element) {
    char1Element.innerHTML = ''
  }
  const char2Element = document.getElementById('char2')
  if (char2Element) {
    char2Element.innerHTML = ''
  }
  const char3Element = document.getElementById('char3')
  if (char3Element) {
    char3Element.innerHTML = ''
  }

  char1.value = HanziWriter.create('char1', '招', {
    charDataLoader: function () {
      return charData1
    },
    width: size,
    height: size,
    padding: 5,
    showOutline: false,
    strokeAnimationSpeed: 5, // 5x normal speed
    delayBetweenStrokes: 10, // milliseconds
    radicalColor: '#337ab7', // blue
  })

  char2.value = HanziWriter.create('char2', '新', {
    charDataLoader: function () {
      return charData2
    },
    width: size,
    height: size,
    padding: 5,
    showOutline: false,
    strokeAnimationSpeed: 5, // 5x normal speed
    delayBetweenStrokes: 10, // milliseconds
    radicalColor: '#337ab7', // blue
  })

  char3.value = HanziWriter.create('char3', '啦', {
    charDataLoader: function () {
      return charData3
    },
    width: size,
    height: size,
    padding: 5,
    showOutline: false,
    strokeAnimationSpeed: 5, // 5x normal speed
    delayBetweenStrokes: 10, // milliseconds
    radicalColor: '#337ab7', // blue
  })
}

/** 动画 */

const ani001 = useTemplateRef('ani-001')
const ani002 = useTemplateRef('ani-002')
const ani003 = useTemplateRef('ani-003')
const ani004 = useTemplateRef('ani-004')
const ani005 = useTemplateRef('ani-005')

function removeAnimate() {
  // 移除所有动画类
  ani001.value.classList.remove('animate__backInLeft')
  ani002.value.classList.remove('animate__backInDown')
  ani003.value.classList.remove('animate__rubberBand')
  ani004.value.classList.remove('animate__backInUp')
  ani005.value.classList.remove('animate__backInUp')
}

function addAnimate() {
  // 添加动画类
  // 下一帧重新添加动画类
  requestAnimationFrame(() => {
    ani001.value.classList.add('animate__backInLeft')
    ani002.value.classList.add('animate__backInDown')
    ani003.value.classList.add('animate__rubberBand')
    ani004.value.classList.add('animate__backInUp')
    ani005.value.classList.add('animate__backInUp')
  })
  char1.value.animateCharacter()
  char2.value.animateCharacter()
  char3.value.animateCharacter()
}

/** Vue 生命钩子 */

onMounted(() => {
  initCharacter()
  char1.value.animateCharacter()
  char2.value.animateCharacter()
  char3.value.animateCharacter()
})
</script>
<template>
  <div class="box">
    <div class="title">
      <p class="animate__animated animate__backInLeft" ref="ani-001">2025</p>
      <p class="animate__animated animate__backInDown" ref="ani-002">书法社</p>
      <div id="character-target-div">
        <span id="char1"></span>
        <span id="char2"></span>
        <span id="char3"></span>
      </div>
    </div>

    <dl class="info animate__animated animate__rubberBand" ref="ani-003">
      <dt>招新时间</dt>
      <dd>2025.05.06-05.09&nbsp;&nbsp;&nbsp;&nbsp;10:00-13:00</dd>
      <hr />
      <dt>招新地点</dt>
      <dd>成都职业技术学院(高新校区) - 软件大楼1211</dd>
    </dl>

    <div class="qq animate__animated animate__backInUp" ref="ani-004">
      <img src="@/assets/image/qq.png" style="width: 2rem; height: 2rem" />
      <div class="txt">
        <p>扫描进群交流</p>
        <p>QQ群：12341234</p>
      </div>
    </div>

    <div class="img">
      <img
        src="@/assets/image/brush.png"
        class="animate__animated animate__backInUp"
        style="height: 2rem"
        ref="ani-005"
      />
    </div>
  </div>
</template>
<style scoped>
.box {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
}

.box .title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 900;
  font-family: 'wangxizhi';
}

.box .title p:nth-child(1) {
  font-size: 1rem;
}

.box .title p:nth-child(2) {
  font-size: 1.5rem;
}

.box .title #character-target-div {
  width: 6rem;
}

.box .info {
  position: absolute;
  left: 5%;
  top: 5rem;
  width: 90%;
  padding: 5%;
  background-color: #fff;
  border-radius: 0.1rem;

  -webkit-mask-image: radial-gradient(circle at 0.3rem 50%, transparent 0.3rem, red 0.3rem);
  -webkit-mask-position: -0.3rem;
}

.box .info dt {
  font-weight: 900;
  font-size: 0.4rem;
}

.box .info dd {
  font-size: 0.3rem;
  margin: 0.2rem 0;
}

.box .info dt:last-of-type {
  margin-top: 0.2rem;
}

.box .info dd:last-of-type {
  margin-bottom: 0;
}

.box .info hr {
  border: none;
  border-top: 1px dashed #999;
}

.box .qq {
  position: absolute;
  left: 5%;
  top: 9rem;
  width: 90%;

  display: flex;
  align-items: center;
  background-color: #ccc;
  box-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2);
}

.box .qq .txt {
  margin-left: 1rem;
  font-size: 0.4rem;
  font-weight: 900;
}

.box .qq .txt p:first-of-type {
  margin-bottom: 0.1rem;
}

.box .img {
  position: absolute;
  left: 50%;
  top: 12rem;
  transform: translateX(-50%);
}
</style>
